<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="set">设置定时器</button>
    <button id="clear">清除定时器</button>

    <button id="one">一次定时器</button>    
    <script>
        //循环定时器
        //setInterval(function(){
        //     document.write('今天天气很好<br>');
        // },1000);
        // function func(){
        //     document.write('今天天气很好<br>');
        // }
        // setInterval(func,1000);
        let time =null;
        $('set').addEventListener('click',()=>{
            time = setInterval(function(){//隔多少秒循环执行
                console.log('今天天气很好<br>');
            },1000);
        });

        $('clear').addEventListener('click',()=>{
            clearInterval(time);
        })

        //一次定时器
        $('one').addEventListener('click',()=>{
            setTimeout(function(){//多少秒后执行一次
                console.log('三秒执行一次');
            },3000);


            // clearTimeout(function(){})
        });

        function $(id){
            return typeof id === "string"?document.getElementById(id) : null;
        }
    </script>
</body>
</html>